import React, { useState } from 'react'
import { Image, Text, View } from 'remax/one'
import { usePageEvent } from 'remax/macro'
import {
  chooseLocation,
  openSetting,
  showModal,
  stopPullDownRefresh,
} from 'remax/wechat'
import { Button, Cell, Row, Space } from 'annar'
import { requestCloud } from '@/hooks/use-cloud'
import useStore from '@/hooks/use-store'
import Login from '@/components/login'
import styles from './index.css'

export default () => {
  const { data, mutate } = useStore()
  const [descriptionEditing, setDescriptionEditing] = useState(false)
  const [description, setDescription] = useState('')
  const [addressEditing, setAddressEditing] = useState(false)
  const [address, setAddress] = useState('')
  const [phoneNumberEditing, setPhoneNumberEditing] = useState(false)
  const [phoneNumber, setPhoneNumber] = useState('')
  const [locationName, setLocationName] = useState('')

  usePageEvent('onPullDownRefresh', async () => {
    await mutate()
    stopPullDownRefresh()
  })

  const getLocation = async () => {
    try {
      const { name, address, longitude, latitude } = await chooseLocation({
        longitude: data.location.coordinates[0],
        latitude: data.location.coordinates[1],
      })
      setLocationName(name)
      await requestCloud('update-store', { location: { longitude, latitude } })
      mutate()
    } catch ({ errMsg }) {
      if (/auth deny/.test(errMsg)) {
        const { confirm } = await showModal({
          title: '获取位置失败',
          content: '请前往设置界面手动授权',
          showCancel: false,
        })
        confirm && (await openSetting())
        getLocation()
      }
    }
  }

  return (
    <Login>
      <Row className={styles.basicArea} align="middle">
        <View className={styles.basicAreaLeft}>
          <Image
            className={styles.avatarImg}
            src={data?.imgUrl}
            mode="aspectFill"
          />
        </View>
        <Space className={styles.basicAreaRight} direction="vertical" size={12}>
          <View className="large-text ellipsis">{data?.name}</View>
          <Row className={styles.centerText} justify="space-around">
            <View>
              <View>
                <Text className="small-text">￥</Text>
                <Text className="large-text">0</Text>
              </View>
              <Text className="small-text">累计营业额</Text>
            </View>
            <View>
              <View>
                <Text className="large-text">0</Text>
                <Text className="small-text">人</Text>
              </View>
              <Text className="small-text">本平台引流客户</Text>
            </View>
          </Row>
        </Space>
      </Row>
      <View className={styles.blockArea}>
        {!descriptionEditing ? (
          <Cell
            label="门店介绍"
            icon="text"
            arrow
            onTap={() => {
              setDescriptionEditing(true)
              setDescription(data.description)
            }}
          >
            {data?.description}
          </Cell>
        ) : (
          <Cell.Input
            value={description}
            label="门店介绍"
            icon="text"
            focus={descriptionEditing}
            maxLength={20}
            placeholder="20字以内"
            extra={
              <Button
                type="primary"
                size="small"
                onTap={async () => {
                  await requestCloud('update-store', { description })
                  mutate()
                  setDescriptionEditing(false)
                }}
              >
                保存
              </Button>
            }
            onChange={({ target: { value } }) => {
              setDescription(value)
            }}
            onBlur={() => {
              setDescriptionEditing(false)
            }}
          />
        )}
        {!addressEditing ? (
          <Cell
            label="门店文字地址"
            icon="location"
            arrow
            onTap={() => {
              setAddressEditing(true)
              setAddress(data.address)
            }}
          >
            {data?.address}
          </Cell>
        ) : (
          <Cell.Input
            value={address}
            label="门店文字地址"
            icon="location"
            maxLength={20}
            placeholder="建议用相对学校的地址"
            extra={
              <Button
                type="primary"
                size="small"
                onTap={async () => {
                  await requestCloud('update-store', { address })
                  mutate()
                  setAddressEditing(false)
                }}
              >
                保存
              </Button>
            }
            onChange={({ target: { value } }) => {
              setAddress(value)
            }}
            onBlur={() => {
              setAddressEditing(false)
            }}
          />
        )}
        <Cell
          label="门店具体位置"
          icon="locationfill"
          arrow
          onTap={getLocation}
        >
          {locationName}
        </Cell>
        {!phoneNumberEditing ? (
          <Cell
            label="门店联系电话"
            icon="phone"
            arrow
            onTap={() => {
              setPhoneNumberEditing(true)
              setPhoneNumber(data.phoneNumber)
            }}
          >
            {data?.phoneNumber}
          </Cell>
        ) : (
          <Cell.Input
            value={phoneNumber}
            label="门店联系电话"
            icon="phone"
            type="number"
            maxLength={20}
            extra={
              <Button
                type="primary"
                size="small"
                onTap={async () => {
                  await requestCloud('update-store', { phoneNumber })
                  mutate()
                  setPhoneNumberEditing(false)
                }}
              >
                保存
              </Button>
            }
            onChange={({ target: { value } }) => {
              setPhoneNumber(value)
            }}
            onBlur={() => {
              setPhoneNumberEditing(false)
            }}
          />
        )}
      </View>
    </Login>
  )
}
